<template>
	<div>
		<!-- <headers /> -->
		<!-- <div style="padding-left: 30px;padding-top: 10px;">
			<el-breadcrumb separator="/" style="text-align: right;">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>菜单管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
    <div class="goodsindex">
        <!-- 搜索条件 -->
        <el-row :gutter="20" class="goodsindex-queryInfo">
            <!-- 商品名称搜索 -->
            <!-- <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-input class="goodsindex-queryInfo-li" v-model="queryInfo.name" clearable size="small" placeholder="请输入产品名称"></el-input>
            </el-col> -->
            <!-- 商品分类搜索 -->
            <!-- <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                 <el-select class="goodsindex-queryInfo-li" v-model="queryInfo.type" size="small" clearable placeholder="请选择产品分类">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col> -->
            <!-- <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" >搜索</el-button>
            </el-col> -->
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" v-if="isAuth('sys:wxmenu:save')">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="addOrUpdatehandle()">添加</el-button>
            </el-col>
        </el-row>
        <!-- 检索结果 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table
                    :data="menuList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="menuId"
                    border
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                      prop="name"
                      label="名称"
                	  header-align="center"
                      sortable>
                    </el-table-column>
                    <el-table-column
                	header-align="center"
                      prop="parentName"
                      label="上级菜单"
                      sortable
                      width="140">
                    </el-table-column>
                	<el-table-column
                	  header-align="center"
                	  align="center"
                	  width="80"
                	  label="图标">
                	  <template #default="scope">
                	    <!-- <icon-svg :name="scope.row.icon || ''"></icon-svg> -->
                		<i :class="scope.row.icon || ''"></i>
                	  </template>
                	</el-table-column>
                    <el-table-column
                      prop="type"
                      align="center"
                	   width="80"
                      label="类型">
                      <template #default="scope">
                        <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
                        <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
                        <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
						<el-tag v-else-if="scope.row.type === 3" size="small" type="info">模板</el-tag>
                      </template>
                    </el-table-column>
                	<el-table-column
                	  prop="orderNum"
                	  header-align="center"
                	  align="center"
                	   width="80"
                	  label="排序号">
                	</el-table-column>
                	<el-table-column
                	  prop="url"
                	  header-align="center"
                	  align="center"
                	  width="160"
                	  :show-overflow-tooltip="true"
                	  label="菜单URL">
                	</el-table-column>
                	<el-table-column
                	  prop="perms"
                	  header-align="center"
                	  align="center"
                	  :show-overflow-tooltip="true"
                	  label="授权标识">
                	</el-table-column>
                	<el-table-column label="操作" align="center" width="180" fixed="right">
                	      <template #default="scope">
                	        <el-button
							 v-if="isAuth('sys:wxmenu:update')"
                	          size="mini"
							  type="primary"
                	          @click="addOrUpdatehandle(scope.row.menuId)">编辑</el-button>
                	        <el-button
							 v-if="isAuth('sys:wxmenu:delete')"
                	          size="mini"
                	          type="danger"
                	          @click="handleDelete(scope.row.menuId)">删除</el-button>
                	      </template>
                	    </el-table-column>
                  </el-table>
            </el-col>
        </el-row>
		<userAddorUpdata v-if="userAddorUpdataVisible" ref="userAddorUpdata" @getMenuList="getMenuList"></userAddorUpdata>
    </div>
	</div>
</template>

<script>
import headers from '../../components/header/header.vue'
import {treeDataTranslate} from '../../utils/treeDataTranslate.js'
import userAddorUpdata from './wxmenu/addorupdate.vue'
export default {
	components:{
		userAddorUpdata,
		headers
	},
    data(){
        return {
			userAddorUpdataVisible:false,//菜单权限
            queryInfo:{
                name: '',
                type: '',
            },
            options: [
                {
                    label: 1,
                    value: '安心蔬菜'
                },
                {
                    label: 2,
                    value: '新鲜牛奶'
                }
            ],
            tableData: [],
			dataForm: {},
			menuList:[],
			addOrUpdateVisible: false,
			tableHeight:''
        }
    },
	created(){
		this.getMenuList();
	},
    methods:{
        handleSizeChange(){

        },
        handleCurrentChange(){

        },
		getMenuList(){
			this.Sevice({
			   url:'/sys/wxMenu/list',
			   method:'get'
			}).then(res=>{
			   if(res&&res.code==200){
				  this.menuList=treeDataTranslate(res.data, 'menuId');
			   }else{
				this.menuList=[]
			   }
			}).catch(err=>{
				console.log(err);
			})
		},
		 // 新增 / 修改
		addOrUpdatehandle(menuId) {
			this.userAddorUpdataVisible = true
			this.$nextTick(() => {
			  this.$refs.userAddorUpdata.init(menuId)
			}) 
		},
		//删除
		handleDelete(id) {
		   this.$confirm('此操作将永久删除该菜单或按钮, 是否继续?', '提示', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		          }).then(() => {
					 this.Sevice({
						url:'sys/wxMenu/delete/'+id,
						method:'post'
					 }).then(res=>{
						if(res&&res.code==200){ 
							 this.$message({
							   type: 'success',
							   message: '删除成功!'
							 });
							this.getMenuList();
						}
					 }).catch(err=>{
						console.log(err);
					 }) 
		  }).catch(() => {
			this.$message({
			  type: 'info',
			  message: '已取消删除'
			});          
		  });
		},
    }
}
</script>

<style scoped>
.goodsindex{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo{
    margin-bottom: 10px;
}
.goodsindex-queryInfo-li{
    width: 100%;
    height: auto;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 列表 */
.goodsindex-list{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>